import { Form, Input, Button, Checkbox, Tabs,Row,Col } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import React, { Component } from 'react'
import styles from './login.less'
import log from '../../image/login/logo.png'
import { Login } from '../../api/login'
import storageUtils from "../../utils/storageUtils"
const { TabPane } = Tabs;

export default class login extends Component {
    onFinish = async (values) => {
        let res = await Login(values)
        console.log(res);
        storageUtils.setStorage("token",res.data.token)
        if(res.data){
            this.props.history.push("/")
        }
    };
    render() {
        return (
            <div className={styles.all}>
                <div className={styles.login}>
                    <div className={styles.title}><img src={log}></img><h1>赤兔养车</h1></div>
                    <Tabs defaultActiveKey="1" centered>
                        <TabPane tab="密码账户登录" key="1">
                        <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={this.onFinish}
                    >
                        <Form.Item
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: '账号不能为空!',
                                },
                            ]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="输入账号" />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入密码!',
                                },
                            ]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                placeholder="输入密码"
                            />
                        </Form.Item>
                        {/* <Form.Item>
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox>Remember me</Checkbox>
                            </Form.Item>

                            <a className="login-form-forgot" href="">
                                Forgot password
                            </a>
                        </Form.Item> */}

                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button" block>
                               登录
                            </Button>
                        </Form.Item>
                        <a href="">注册账户</a>
                        <a href="" className={styles.boss}>商家入驻</a>
                    </Form>
                        </TabPane>
                        {/* 分页二 */}
                        <TabPane tab="手机号登录" key="2">
                             <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={this.onFinish}
                    >
                        <Form.Item
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your Username!',
                                },
                            ]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="" />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your Password!',
                                },
                            ]}
                        >
                            <Row gutter={8}>
          <Col span={16}>
            <Form.Item
              name="captcha"
              noStyle
              rules={[
                {
                  required: true,
                  message: 'Please input the captcha you got!',
                },
              ]}
            >
              <Input prefix={<LockOutlined className="site-form-item-icon" />}/>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Button>获取验证码</Button>
          </Col>
        </Row>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button" block>
                               手机登录
                            </Button>
                        </Form.Item>
                        <a href="">注册账户</a>
                        <a href="" className={styles.boss}>商家入驻</a>
                    </Form>
                        </TabPane>
                    </Tabs>
                </div>
            </div>
        )
    }
}
